// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

// Base styles for all examples

$example-frame-spacing: $pt-spacing * 2;
$example-frame-border-radius: $pt-border-radius * 2;
$example-spacing: $pt-spacing * 10;

// full-bleed wrapper for example
.docs-example-frame {
  margin-top: $content-padding * 2;
  position: relative;
  width: 100%;
}

// options to the right of example in same row
.docs-example-frame-row {
  @include pt-flex-container(row, $pt-spacing * 2, $fill: ".docs-example");

  // option elements arranged vertically. use headings for grouping.
  .docs-example-options {
    @include pt-flex-container(column, $pt-spacing * 2);
    max-width: $pt-spacing * 75;
  }
}

// options below example in its own row.
.docs-example-frame-column {
  @include pt-flex-container(column, $pt-spacing * 2, $fill: ".docs-example");

  // option elements arranged horizontally. group controls into columns.
  .docs-example-options {
    @include pt-flex-container(row, $pt-spacing * 10);
    justify-content: center;
    max-width: unset;

    > div {
      display: flex;
      flex-direction: column;
    }
  }
}

.docs-example {
  align-items: center;
  background: $pt-app-secondary-background-color;
  border-radius: $example-frame-border-radius;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
  // https://css-tricks.com/flexbox-truncated-text/#article-header-id-3
  min-width: 0;
  padding: $example-spacing * 0.5;

  .#{$ns}-dark & {
    background: $pt-dark-app-secondary-background-color;
  }

  > * {
    margin: $example-spacing * 0.5;
  }
}

.docs-example-options {
  background-color: $pt-app-elevated-background-color;
  border-radius: $example-frame-border-radius;
  flex: 0 0 auto;
  padding: $pt-spacing * 5;
  text-align: left;

  .#{$ns}-heading:not(:first-child) {
    margin-top: $pt-spacing * 2;
  }

  .docs-prop-description {
    font-size: $pt-font-size-small;
  }

  .#{$ns}-control:last-child,
  .#{$ns}-form-group:last-child,
  .#{$ns}-label:last-child {
    margin-bottom: 0;
  }

  .#{$ns}-dark & {
    background-color: $pt-dark-app-elevated-background-color;

    .#{$ns}-segmented-control {
      background-color: $pt-dark-app-background-color;
    }
  }
}

.docs-example-markup {
  margin-top: $example-frame-spacing;

  .editor,
  .#{$ns}-docs-code-block {
    background: $pt-app-elevated-background-color;
    border-radius: $example-frame-border-radius;
    box-shadow: none;
    margin: 0;

    .#{$ns}-dark & {
      background: $pt-dark-app-elevated-background-color;
      border: none;
      box-shadow: none;
    }
  }
}

.docs-example-view-source {
  border-radius: $example-frame-border-radius;
  display: block;
  margin-bottom: $pt-spacing * 10;
  margin-top: $example-frame-spacing;

  &.#{$ns}-button {
    height: $pt-button-height-large;
    transition: background-color $pt-transition-duration $pt-transition-ease;
  }

  &:not(:hover, :active) {
    background-color: $pt-app-elevated-background-color;

    .#{$ns}-dark & {
      background-color: $pt-dark-app-elevated-background-color;
    }
  }
}

// colors for CSS modifiers
.#{$ns}-code[data-modifier^=":"] {
  color: $attribute-modifier-color;
}

.#{$ns}-code[data-modifier^="."] {
  color: $class-modifier-color;
}
